<template>
  <div class="home">
    <el-container style="height: 100%; position:fixed; width:100%; border: 1px solid #eee">
      <el-aside width="auto">
        <el-menu
          style="height:100%;"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          :default-active="$route.path"
          router
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <!-- logo部分 -->
          <el-menu-item class="menu-logo" style="height:60px; line-height:60px;">
            <i class="i_img">
              <img src="favicon.ico" width="30" class="logo" />
            </i>
            <span style="font-size: 16px; font-weight: 700;" slot="title">{{ $t('m.title')}}</span>
          </el-menu-item>
          <el-submenu
            v-for="(item,index) in this.$t('m.leftRouter') "
            :key="index"
            :index="item.title"
          >
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">{{item.title}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="(iteme,indexa) in item.list"
                :key="indexa"
                :index="iteme.path"
                @click="addTab(iteme)"
              >{{iteme.name}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <a title="隐藏" class="showhide el-link el-link--default" @click="isCollapse=!isCollapse">
            <i class="el-icon-caret-left"></i>
          </a>
          <el-tabs v-model="path" type="card" @tab-remove="removeTab" @tab-click="skip">
            <el-tab-pane :label="home" name="/"></el-tab-pane>
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.name"
              :name="item.path"
              closable
            ></el-tab-pane>
          </el-tabs>
          <div class="signout">
            <el-dropdown @command="changeLangEvent">
              <span>{{this.$t("m.English")}}</span>
              <i class="el-icon-arrow-down"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="en">中文</el-dropdown-item>
                <el-dropdown-item command="zh">English</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <a class="signout-name" @click="signout">
              <i class="el-icon-s-custom"></i>
              {{this.$t("m.loginout")}}
            </a>
            <span class="span" @click="headPortrait()">
              <el-avatar :size="40" :src="circleUrl"></el-avatar>
            </span>
          </div>
        </el-header>
        <el-main>
          <router-view name="left"></router-view>
        </el-main>
      </el-container>
    </el-container>
    <!-- 头像 -->
    <el-dialog title="上传头像" :visible.sync="dialogVisible" width="620px">
      <span>
        <el-upload
          class="avatar-uploader"
          action="123"
          :http-request="upLoad"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="circleUrl" :src="circleUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
export default {
  data() {
    return {
      dialogVisible: false,
      path: "/", //当前路由
      isCollapse: false, //导航窗口收缩状态
      home: this.$t("m.home"),
      editableTabs: [],     
    };
  },
  computed:{
     ...mapState(['circleUrl','userUid'])
  },
  methods: {
    handleAvatarSuccess(e, file) {
       this.getcircleUrl( URL.createObjectURL(file.raw))//new Date().getTime()使用时间戳更换每次的修改的图片
    },
    ...mapActions([
      'gettoken', // 将 `this.gettoken(amount)` 映射为 `this.$store.dispatch('gettoken', amount)`
       'getuserUid',
        'getcircleUrl'
    ]),
    //上传
    beforeAvatarUpload(file) {
      const isJPG =
        file.type == "image/jpeg" ||
        file.type == "image/png" ||
        file.type == "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    upLoad(file) {
      const fm = new FormData();
      fm.append("userImg", file.file);
      this.axios
        .post(
          "/api/User/UploadHeader?userUid=" + this.userUid,
          fm
        )
        .then(res => {
          if (res.data.code === 1) {
           this.getcircleUrl(res.data.data + '?' + new Date().getTime())//new Date().getTime()使用时间戳更换每次的修改的图片
            this.$message.success("头像上传成功");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    headPortrait() {
      this.dialogVisible = !this.dialogVisible;
    },
     //添加
    addTab(targetName) {
      let tabs = this.editableTabs;
      this.path = targetName.path;
      let indexof = tabs.findIndex(item => item.path === targetName.path);
      if (indexof == -1) {
        this.editableTabs.push(targetName);
      }
    },
    //中英文切换
    changeLangEvent(command) {
      if (command == "zh") {
        localStorage.setItem("locale", "en");
        this.$i18n.locale = localStorage.getItem("locale"); //关键语句
        this.home = this.$t("m.home");
        //双重循环切换
        this.editableTabs.forEach(item => {
          this.$t("m.editableTabs").forEach(itemz => {
            if(item.path==itemz.path){
             item.name=itemz.name
            }
          });
        });
      } else if (command == "en") {
        localStorage.setItem("locale", "zh");
        this.$i18n.locale = localStorage.getItem("locale"); //关键语句
        this.home = this.$t("m.home");
         //双重循环切换
        this.editableTabs.forEach(item => {
          this.$t("m.editableTabs").forEach(itemz => {
            if(item.path==itemz.path){
             item.name=itemz.name
            }
          });
        });
      }
    },
    //删除
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let index = tabs.findIndex(item => item.path === targetName);
      if (targetName == this.$route.path) {
        //判断当前删除页路由和现在是否相同
        if (index == tabs.length - 1 && index == 0) {
          this.$router.push("/"); //跳转首页
          this.path = "/";
        } else if (index == tabs.length - 1) {
          //最后一个标签
          let path = tabs[index - 1].path;
          this.$router.push(path); //跳转关闭的前一页
          this.path = path;
        } else {
          let path = tabs[index + 1].path;
          this.$router.push(path); //跳转关闭的后一页
          this.path = path;
        }
      }
      this.editableTabs = tabs.filter(item => item.path !== targetName); //通过path过滤
    },
    skip() {
      //路由跳转
      this.$router.push(this.path); //跳转
    },
    signout() {
      //右上角退出
      this.$router.push("/login"); //跳转
    }
  }
};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
/deep/.el-header {
  color: #333;
  padding: 0px;
  display: flex;
  padding-right: 20px;
}
.header-right {
  display: flex;
  width: 96%;
  justify-content: space-between;
}
.el-aside {
  color: #333;
}
/deep/ .el-submenu__icon-arrow {
  display: none;
}
.el-submenu__title * {
  vertical-align: middle;
  width: 30px;
  margin-right: 10px;
}
/deep/.el-menu-item-group__title {
  padding: 0px 0px 0px 20px;
}
/deep/.el-submenu .el-menu-item {
  height: 48px;
  line-height: 48px;
}
.el-menu-item.is-active i {
  color: inherit;
}
.el-menu {
  height: 500px;
  /deep/ .menu-logo {
    background-color: rgb(255, 235, 59) !important;
    .i_img {
      margin-right: 10px;
      border-radius: 50%;
      padding: 5px 2px 7px 2px;
      box-shadow: 0 0 7px 1px teal;
    }
    span {
      color: teal !important;
    }
  }
}
/deep/.el-tabs {
  padding: 0px 20px;
  overflow: hidden;
  flex: 1;
  .el-tabs__header {
    padding: 0px 20px 0px 20px;
    top: 19px;
  }
}
/deep/.el-dropdown {
  color: #0a53e5;
}
.el-header {
  display: flex;
  position: relative;
  border-bottom: 1px solid #e4e7ed;
  padding-right: 20px;
  .el-link.showhide {
    background-color: teal;
    color: #fff;
    height: 100%;
    width: 30px;
    font-size: 22px;
    .el-icon-caret-left {
      font-family: element-icons !important;
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: baseline;
      display: inline-block;
    }
  }
}
/deep/.el-avatar--circle {
  margin-top: -5px;
  vertical-align: middle;
}
.signout {
  line-height: 59px;
  .signout-name {
    font-size: 15px;
    display: inline-block;
    padding: 0px 20px;
  }
  .signout-name:hover {
    cursor: pointer;
  }
  .el-dropdown {
    cursor: pointer;
    color: #409eff;
  }
}
// 头像
.avatar-uploader {
  /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    margin-left: 190px;
  }
}
.avatar-uploader {
  /deep/.el-upload:hover {
    border-color: #409eff;
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/deep/.el-avatar--circle{
  cursor: pointer;
}
</style>